//当所有得到dom元素加载完毕之后再实现的事件函数
window.onload = function () {
    //声明一个点击缩略图的下表
    var bigImageIndex = 0;
    //路径导航的数据渲染
    navPathDataBind();

    function navPathDataBind() {

        /*
        * 先获取路径导航的页面元素
        * 2 获取所需要的数据（data.js）
        * 3 由于数据是动态产生的，相应的dom元素也应该是动态产生的，需要创建dom元素，根据数据的数量进行创建元素
        * 4 再遍历数据之后创建a标签
        * */
        //1
        var navPath = document.querySelector('#wrapper #content .contentMain #navPath');
        //2
        var path = goodData.path;
        //3 遍历数据
        for (var i = 0; i < path.length; i++) {
            if (i == path.length - 1) {
                //创建a并没有href属性
                var aNode = document.createElement("a");
                aNode.innerText = path[i].title;
                navPath.appendChild(aNode);
            } else {
                //4 创建标签
                var aNode = document.createElement("a");
                aNode.href = path[i].url;
                aNode.innerText = path[i].title;
                // 5创建i标签
                var iNode = document.createElement('i');
                iNode.innerText = '/';
                //让navPath追加a i
                navPath.appendChild(aNode);
                navPath.appendChild(iNode);
            }
        }
    }

    //    放大镜的移入移出效果
    bigClassBind();

    function bigClassBind() {
        /*
        * 1 获取小图框元素对象并且设置移入事件（onmouseover(与父元素有关),onmouseenter）
        * 2 动态创建蒙版元素与大图框元素与图片
        * 3 移除时移除蒙版元素与大图框与大图片
        * */

        //1 获取
        var smallPic = document.querySelector('#smallPic');
        var leftTop = document.querySelector('#leftTop');
        var imagessrc = goodData.imagessrc;
        //2 设置移入事件
        smallPic.onmouseenter = function () {
            //3 创建蒙版
            var maskDiv = document.createElement('div')
            maskDiv.className = "mask";
            // 4创建大图框元素
            var BigPic = document.createElement('div');
            BigPic.id = 'bigPic'

            // 创建大图片
            var BigImg = document.createElement('img');
            BigImg.src = imagessrc[bigImageIndex].b;

            //    6 追加大图片
            BigPic.appendChild(BigImg);
            //    7 小图框追加蒙版
            smallPic.appendChild(maskDiv);
            //    8
            leftTop.appendChild(BigPic);
            // 设置拖拽事件
            smallPic.onmousemove = function (event) {
                // 鼠标点距离浏览器左侧的距离
                //getBoundingClientRect()为小图框距离浏览器左侧的距离
                var left = event.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
                var top = event.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetWidth / 2;
                //     设置边框
                if (left < 0) {
                    left = 0;
                } else if (left > smallPic.clientWidth - maskDiv.offsetWidth) {
                    left = smallPic.clientWidth - maskDiv.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                } else if (top > smallPic.clientHeight - maskDiv.offsetHeight) {
                    top = smallPic.clientHeight - maskDiv.offsetHeight;
                }
                // 设置left属性
                maskDiv.style.left = left + 'px';
                maskDiv.style.top = top + 'px';
                // 移动的比例关系=蒙版移动距离/大图片移动距离
                //蒙版距离=小图框宽度-蒙版元素的宽度
                var scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (BigImg.offsetWidth - BigPic.clientWidth);
                BigImg.style.left = -left / scale + 'px';
                BigImg.style.top = -top / scale + 'px';

            }
            //    设置移除事件
            smallPic.onmouseleave = function () {
                //    让小图框移除蒙版
                smallPic.removeChild(maskDiv);
                leftTop.removeChild(BigPic);
            }
        }

    }

    //动态渲染放大镜缩略图数据
    thumbnailData();

    function thumbnailData() {
        /*
        * 1 先获取piclist下的ul
        * 2 再获取data.js文件里的gooddata>imagessrc
        * 3 遍历数组，根据数组长度创建li元素
        * 4 ul遍历追加li
        * */
        var ul = document.querySelector('#piclist ul')
        //2 获取数据
        var imagessrc = goodData.imagessrc;
        //3 遍历数组
        for (var i = 0; i < imagessrc.length; i++) {
            //创建li元素
            var newLi = document.createElement('li');
            //5 创建image元素
            var newImg = document.createElement('img');
            newImg.src = imagessrc[i].s;
            //6 li追加image元素
            newLi.appendChild(newImg);
            //7 遍历追加ul+li
            ul.appendChild(newLi);

        }
    }

    // 点击缩略图效果
    thumbnailClick();

    function thumbnailClick() {
        /*
        * 1 获取所有的li元素，
        * 2 点击缩略图所需要的地址，替换src里的值
        * */
        //1
        var liNodes = document.querySelectorAll('#piclist ul li');
        var smallPicImage = document.querySelector('#smallPic img');
        var imagessrc = goodData.imagessrc;
        smallPicImage.src = imagessrc[0].s;
        //2
        for (var i = 0; i < liNodes.length; i++) {
            //在点击事件之前，每一个元素添加自定义下标
            liNodes[i].index = i;
            liNodes[i].onclick = function () {
                var idx = this.index;
                bigImageIndex = idx;
                //变化小图路径
                smallPicImage.src = imagessrc[idx].s;

            }
        }
    }

    // 点击缩略图左右街头效果
    clickLeftRight();

    function clickLeftRight() {
        /*
        * 1 获取左右箭头按钮
        * 2 获取可视div以及ul元素和所有的li元素
        * 3 计算 发生的起点，走过的步长
        * 3 点击发生事件
        * */
        //1 获取箭头元素
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        //2 获取可视元素
        var picList = document.querySelector('#piclist');
        var ul = document.querySelector('#piclist ul');
        var liNodes = document.querySelectorAll('#piclist ul li');
        //3 计算
        //发生七点
        var start = 0;
        //步长
        var step = (liNodes[0].offsetWidth + 20) * 2;
        //总体运动的距离值=ul宽-div框宽=(图片总数-div显示的数量)*(likuan+20)
        var endPosition = (liNodes.length - 5) * (liNodes[0].offsetWidth + 20);
        //4 发生事件
        prev.onclick = function () {
            start -= step;
            if (start < 0) {
                start = 0;
            }
            ul.style.left = -start + 'px';
        }
        next.onclick = function () {
            start += step;
            if (start > endPosition) {
                start = endPosition;
            }
            ul.style.left = -start + 'px';
        }

    }

    //商品详情数据的动态渲染
    rightTopData();

    function rightTopData() {
        /*
        * 思路：
        * 1、查找rightTop元素
        * 2、 查找data里的goodsdetail
        * 3、建立一个字符串变量，将原来的布局结构粘贴进来，将所对应的数据放在对应的位置上重新渲染top元素
        * */
        //1 查找元素
        var rightTop = document.querySelector('.rightTop');
        //    2 查找数据
        var goodsDetail = goodData.goodsDetail;
        //    3 创建字符串变量
        // 模板字符串替换数据
        var s = ` <h3>${goodsDetail.title}</h3>
            <p>${goodsDetail.recommend}</p>
            <div class="priceWrap">
              <div class="priceTop">
                <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                <div class="price">
                  <span>￥</span>
                  <p>${goodsDetail.price}</p>
                  <i>降价通知</i>
                </div>
                <p>
                  <span>累计评价</span>
                  <span>${goodsDetail.evaluateNum}</span>
                </p>
              </div>
              <div class="priceBottom">
                <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                <p>
                  <span>
                    ${goodsDetail.promoteSales.type}
                  </span>
                  <span>
                     ${goodsDetail.promoteSales.content}
                  </span>
                </p>
              </div>
            </div>
            <div class="support">
              <span>支&nbsp;&nbsp;&nbsp;&nbsp;持</span>
              <p>${goodsDetail.support}</p>
            </div>
            <div class="address">
              <span>配&nbsp;送&nbsp;至</span>
              <p>${goodsDetail.address}</p>
            </div>`;
        //    4、 重新渲染
        rightTop.innerHTML = s;

    }

    //    商品参数的动态渲染
    rightBottomData();

    function rightBottomData() {
        /*
        * 1、知道right bottom的元素对象
        * 2、查找data.js下goodsData.goodsDetail.crumb数据
        * 3、由于数据是数组，所以需要遍历，一个元素需要动态的dl
        * */
        //1 查找元素对象
        var chooseWrap = document.querySelector('.chooseWrap');
        /*console.log(chooseWrap)*/
        //2 查找数据
        var crumbData = goodData.goodsDetail.crumbData;
        // 3 循环数据
        for (var i = 0; i < crumbData.length; i++) {
            // 4 创建dl元素
            var dlNode = document.createElement('dl');
            //5 创建dt元素怒
            var dtNode = document.createElement('dt');
            dtNode.innerText = crumbData[i].title;
            //6 dl追加dt
            dlNode.appendChild(dtNode);

            //7 遍历dd元素

            //8 choosewrap追加dl
            for (var j = 0; j < crumbData[i].data.length; j++) {
                // 创建dd元素
                var ddNode = document.createElement('dd');
                ddNode.innerText = crumbData[i].data[j].type;
                ddNode.setAttribute('price', crumbData[i].data[j].changePrice)
                //dl追加dd
                dlNode.appendChild(ddNode);
            }
            chooseWrap.appendChild(dlNode);
        }

    }

//    点击商品之后的颜色排他效果
    clickDdBind();

    function clickDdBind() {
        /*
         * 1、 获取所有得到dl元素，取第一个dl元素所有的dd做测试
         * 2、循环所有的点击元素并添加点击事件
         * 3、确定实际发生事件的目标源对象，给其他所有元素充值为基础颜色
         * =======================================================
         * 点击dd之后的mark标记
         * 1 创建一个容器，确定数组的起始长度,添加一些默认值
         * */

        var dlNodes = document.querySelectorAll('.chooseWrap dl')
        var arr = new Array(dlNodes.length);
        var choose = document.querySelector('.choose')
        arr.fill(0);
        for (let i = 0; i < dlNodes.length; i++) {
            (function (i) {

                var ddNodes = dlNodes[i].querySelectorAll('dd');
                //2
                for (let j = 0; j < ddNodes.length; j++) {
                    ddNodes[j].onclick = function () {
                        //情况元素
                        choose.innerHTML = "";
                        //3
                        for (let k = 0; k < ddNodes.length; k++) {
                            ddNodes[k].style.color = "#666"
                        }
                        this.style.color = 'red';

                        //点击dd元素动态产生一个mark元素
                        arr[i] = this;
                        changePriceBind(arr);//实参
                        // 遍历arr数组
                        arr.forEach(function (value, index) {
                            //条件为真
                            if (value) {
                                var markDiv = document.createElement('div');
                                markDiv.className = 'mark';
                                markDiv.innerText = value.innerText;
                                var aNode = document.createElement('a')
                                aNode.innerText = 'X';
                                //设置下表
                                aNode.setAttribute('index', index);
                                markDiv.appendChild(aNode);
                                //choose追加div
                                choose.appendChild(markDiv);
                            }
                        })
                        //获取所有的a标签元素并循环发生点击事件
                        var aNodes = document.querySelectorAll('.mark a');
                        for (var n = 0; n < aNodes.length; n++) {
                            aNodes[n].onclick = function () {
                                var idx1 = this.getAttribute('index');
                                //恢复数组中对应下表元素值
                                arr[idx1] = 0;
                                //找对对应下标dl下dd
                                var ddlist = dlNodes[idx1].querySelectorAll('dd');
                                //    遍历dd
                                for (var m = 0; m < ddlist.length; m++) {
                                    ddlist[m].style.color = "#666";
                                }

                                ddlist[0].style.color = 'red';
                                //删除对应下标下位置的标记
                                choose.removeChild(this.parentNode);
                                //调用价格函数
                                changePriceBind(arr);
                            }
                        }

                    }
                }
            })(i)
        }

    }

//    价格变动函数声明
    function changePriceBind(arr) {
        /**
         *1、 获取价格的标签元素
         * 2 给每一个dd标签身上默认设置一个自定义属性，记录变化的价格
         * 3 遍历arr数组，将dd元素身上的先变化的价格和已有的价格相加，将计算的结果重新渲染
         * */
            //1
        var oldPrice = document.querySelector(".price p");
        var price = goodData.goodsDetail.price;
        //    2记录
        for (var i = 0; i < arr.length; i++) {
            if (arr[i]) {
                var changePrice = Number(arr[i].getAttribute('price'));
                //最终价格
                price += changePrice;
            }
        }
        oldPrice.innerText = price;
        //3 将变化后价格写入左侧标签里
        var leftPrice = document.querySelector('.listWrap .left p');
        var ipts = document.querySelectorAll(".middle li input");
        var newPrice = document.querySelector('.listWrap .right i');
        leftPrice.innerText = '$' + price;
        //   4 遍历选择搭配所有复选框元素
        for (var j = 0; j < ipts.length; j++) {
            if (ipts[j].checked) {
                price += Number(ipts[j].value)
            } else {
                newPrice.innerText = '$' + price;
            }
        }

    }

//    选择搭配中间区域复选框价格效果
    choosePrice();

    function choosePrice() {
        /**
         * 1、先获取中间区域中所有的复选框元素
         * 2、遍历折现元素取出价格进行累加
         * 3、
         * */
            //1
        var ipts = document.querySelectorAll(".middle li input");
        var leftPrice = document.querySelector('.listWrap .left p');
        var newPrice = document.querySelector('.listWrap .right i');
        //2
        for (var i = 0; i < ipts.length; i++) {
            ipts[i].onclick = function () {
                var oldPrice = Number(leftPrice.innerText.slice(1));
                for (var j = 0; j < ipts.length; j++) {
                    if (ipts[j].checked) {
                        //左侧价格加上附加价格
                        oldPrice = oldPrice + Number(ipts[j].value);

                    }
                }
                //3 重新写回套餐价标签里
                newPrice.innerText = '￥' + oldPrice;
            }
        }
    }

//    封装公共的选项卡函数
    /**
     * 1 被点击的元素
     * 2 被切换显示的元素
     *
     * */
    function tab(tabBtns, tabConts) {
        for (var i = 0; i < tabBtns.length; i++) {
            tabBtns[i].index = i;
            tabBtns[i].onclick = function () {
                for (var j = 0; j < tabBtns.length; j++) {
                    tabBtns[j].className = '';
                    tabConts[j].className = '';
                }
                this.className = 'active';
                tabConts[this.index].className = 'active';
            }
        }

    }

//    点击左侧选项卡
    LeftTab();

    function LeftTab() {
        //被点击元素
        var h4s = document.querySelectorAll('.asideTop h4');
        var divs = document.querySelectorAll('.asideContent div');
        tab(h4s, divs);

    }

    rightTab()

    function rightTab() {
        var lis = document.querySelectorAll('.tabBtns li');
        var divs = document.querySelectorAll('.tabContents div');
        tab(lis, divs);
    }

//    右边侧边栏的点击效果
    rightAsideBind()

    function rightAsideBind() {
        /**
         * 1、找到元素按钮
         * 2、记录初始状态，对内容进行判断
         * */
        var btns = document.querySelector('.rightAside .btns');
        var flag = true;
        var rightAside=document.querySelector('.rightAside')
        //    发生点击事件
        btns.onclick = function () {
            if (flag) {
                //    展开
                // flag = false;
                btns.className='btns btnsOpen';
                rightAside.className='rightAside asideOpen'
            } else {
                btns.className='btns btnsClose';
                rightAside.className='rightAside asideClose'
            }
            flag=!flag;
        }

    }




}
